<template>
  <n-input
    :value="modelValue"
    :type="option?.type === 'input' ? 'text' : option?.type"
    :size="option?.size"
    :placeholder="option?.placeholder"
    :disabled="option?.disabled"
    :autofocus="option?.autofocus"
    :autosize="option?.autosize"
    :clearable="option?.clearable"
    :maxlength="option?.maxlength"
    :minlength="option?.minlength"
    :readonly="option?.readonly"
    :round="option?.round"
    :rows="option?.rows"
    :show-count="option?.showCount"
    :allow-input="option?.allowInput"
    @input="option?.onInput"
    @blur="option?.onBlur"
    @focus="option?.onFocus"
    @clear="option?.onClear"
    @update:value="(v) => (option?.onUpdate?.(v), $emit('update:modelValue', v))">
    <template #prefix><component :is="option?.renderPrefix" /></template>
    <template #suffix><component :is="option?.renderSuffix" /></template>
  </n-input>
</template>

<script lang="ts" setup>
import { NInput } from "naive-ui";
import type { InputOption } from "../form-item-types";

defineProps<{ modelValue: any; option?: InputOption }>();
</script>
